<template>
  <div class="panel-top">
    <div class="item-title clearfix">
      <div class="name fl">{{$t('income.now_income')}}</div>
      <div class="button-box fr">
        <button :class="{active:showData}" @click="showData = true;">{{$t('dashboard.show')}}</button>
        <button :class="{active:!showData}" @click="showData = false;">{{$t('dashboard.hide')}}</button>
      </div>
    </div>
    <div class="item-content">
      <div class="item">
        <div class="item-top">
          <spinner v-if="loading" class="val"/>
          <template v-else>
            <cu :val="earn | num" :decimals="incomeDecimal" class="val" v-show="showData"></cu>
            <span class="val" v-show="!showData">**********</span>
            <span class="unit">{{nowCoinType}}</span>
          </template>
        </div>
        <div class="item-bottom">
          <span class="name">{{$t('dashboard.earn')}}</span>
        </div>
      </div>
      <div class="item">
        <div class="item-top">
          <spinner v-if="loading" class="val"/>
          <template v-else>
            <cu :val="pay_amount | num" :decimals="incomeDecimal" class="val" v-show="showData"></cu>
            <span class="val" v-show="!showData">**********</span>
            <span class="unit">{{nowCoinType}}</span>
          </template>
        </div>
        <div class="item-bottom">
          <span class="name">{{$t('dashboard.pay_amount')}}</span>
        </div>
      </div>
      <div class="item">
        <div class="item-top">
          <spinner v-if="loading" class="val"/>
          <template v-else>
            <cu :val="yesterdayearn | num" :decimals="incomeDecimal" class="val" v-show="showData"></cu>
            <span class="val" v-show="!showData">**********</span>
            <span class="unit">{{nowCoinType}}</span>
          </template>
        </div>
        <div class="item-bottom">
          <span class="name">{{$t('dashboard.yesterdayearn')}}</span>
        </div>
      </div>
      <div class="item">
        <div class="item-top">
          <spinner v-if="loading" class="val"/>
          <template v-else>
            <cu :val="per | num" :decimals="incomeDecimal" class="val" v-show="showData"></cu>
            <span class="val" v-show="!showData">**********</span>
            <span class="unit">{{nowCoinType}}</span>
          </template>
        </div>
        <div class="item-bottom">
          <span class="name">{{$t('income.paymentInfoData')}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cu from '@/components/CountUp';
import Spinner from '@/components/Spinner';
import { mapGetters } from 'vuex';

export default {
  props: ['earn', 'pay_amount', 'yesterdayearn', 'per', 'loading'],
  components: {
    cu,
    Spinner,
  },
  data() {
    return {
      showData: true,
    };
  },
  computed: {
    ...mapGetters(['subCoinType']),
    nowCoinType() {
      return this.subCoinType.toUpperCase();
    },
    incomeDecimal() {
      return this.subCoinType === 'eth' ? 9 : 8;
    },
  },
};
</script>
